<template>
	<view class="container">
		<view class="bg_box" :style="{'paddingTop':menuButtonInfo.top+'px'}">
			<view class="top_box" :style="{'height':menuButtonInfo.height+'px','width':menuButtonInfo.left+'px'}"
				@click="$gourl('/pages/index/search')">
				<view class="search_box">
					<u-icon name="search" size="40" color="#707070"></u-icon>
					<input type="text" placeholder="搜索内容" disabled="" />
				</view>
			</view>
			<view class="commodity_type">
				<view class="option">
					<view class="all" @click="typeClick">
						<view>全</view>
						<view>部</view>
						<u-icon name="list"></u-icon>
					</view>
					<view class="type_box">
						<view class="list" v-for="(item,index) in typeList" :key="item"
							:class="typeCurrent==index?'active':''" @click="selectType(item,index)">
							<image :src="item.pic" mode=""></image>
							<view class="name">{{item.cate_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<scroll-view class="content_left_nav_bar" scroll-y="true">
				<view class="bar_con" v-for="(item,index) in typeChildList" :key="index"
					:class="leftNavCurrent==index?'active':''" @click="leftNavBarClick(item,index)">
					{{item.cate_name}}
				</view>
			</scroll-view>
			<scroll-view class="content_right_content" scroll-y="true" @scrolltolower="refresherrefresh">
				<view class="title">
					<view>{{typeChildList[leftNavCurrent].cate_name||''}}</view>
				</view>
				<view class="mall_box">
					<view class="mall" v-for="(item,index) in goodsList" :key="index"
						@click="$gourl('/mallPage/goodsDetails?id='+item.id)">
						<image :src="item.image" mode=""></image>
						<view class="mall_info">
							<view class="name">{{item.store_name}}</view>
							<view class="specs">库存：{{item.stock}}</view>
							<view class="renzhen">￥{{item.price}}</view>
						</view>
						<view class="addcart" @click.stop="goodsClick(item)" v-if="isLogin">选规格</view>
					</view>
					<u-loadmore :status="status" v-if="count>1" />
				</view>
			</scroll-view>
		</view>
		<view class="type_mask" v-if="allType" :style="{'paddingTop':`calc(350rpx)	`}">
			<view class="mask_content">
				<view class="list_box">
					<view class="list" v-for="(item,index) in typeList" :key="item"
						:class="typeCurrent==index?'active':''" @click="selectType(item,index)">
						<image :src="item.pic" mode=""></image>
						<view class="name">{{item.cate_name}}</view>
					</view>
				</view>
				<view class="sq" @click="typeClose()">点击收起<u-icon name="arrow-up"></u-icon></view>
			</view>
		</view>
		<u-popup v-model="addCar" mode="bottom" border-radius="20" @close="maskClose" :closeable="true">
			<view class="con">
				<view class="top_img">
					<image :src="goodsDetail.content_banner[0].img" mode="widthFix"></image>
				</view>
				<view class="con_bg">
					<view class="mall_info">
						<image
							:src="skuValue[skuCurrent].image!==''?skuValue[skuCurrent].image:goodsDetail.storeInfo.image"
							mode=""></image>
						<view class="infos">
							<view class="name" style="font-weight: bold;">
								{{goodsDetail.storeInfo.store_name}}{{skuValue[skuCurrent].suk}}
							</view>
							<view class="specs">库存：{{skuValue[skuCurrent].stock}}</view>
							<view class="price">
								<view class="big"><text>￥</text>{{skuValue[skuCurrent].price}}</view>
								<view class="small"><text>￥</text>{{skuValue[skuCurrent].ot_price}}</view>
							</view>
						</view>
					</view>
					<view class="sku_box">
						<view class="title">规格</view>
						<scroll-view scroll-x="true">
							<view class="guigebox">
								<view class="list" v-for="(item,index) in skuValue" :key="index"
									:class="skuCurrent==index?'active':''" @click="skuClick(item,index)">
									<image :src="item.image||goodsDetail.storeInfo.image" mode=""></image>
									<view class="text"
										style="background: #fff !important;font-size: 24rpx;font-weight: normal;">
										{{item.suk}}
									</view>
									<view class="text" style="font-size: 20rpx;height: 40rpx;font-weight: normal;">
										￥{{item.price}}/瓶</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="sku_box">
						<view class="title">
							<view class="txt">冰冻</view>
							<view class="sku"><text style="margin-right: 10rpx;">共{{bdNumber + cwNumber}}瓶</text>|<text
									class="ice">冰冻{{bdNumber}}</text>常温{{cwNumber}}</view>
						</view>
						<view class="sku bing">
							<view class="list" v-for="(item,index) in skuValue[skuCurrent].wdInfo" :key="index"
								v-if="item !== '自定义冰冻数量'" :class="bdCurrent==index?'active':''"
								@click="bdClick(item,index)">
								{{item}}
							</view>
						</view>
						<view class="input_box list" :class="bdCurrent == 3 ? 'active' : ''"
							v-if="skuValue[skuCurrent].wdInfo.includes('自定义冰冻数量')||(skuValue[skuCurrent].wdInfo.length>1 && (bdNumber + cwNumber)>1)"
							@click="bdClick('自定义冰冻数量',3)">
							<view>自定义冰冻数量</view>
							<view style="flex: 1;display: flex;justify-content: space-between;padding-right: 20rpx;"
								v-if="bdCurrent == 3">
								<text style="font-weight: normal;margin-right: 20rpx;">全冰</text> <u-slider
									v-model="bfNumber" setup="1" height="10" style="flex: 1;"
									@moving="sliderEnd"></u-slider> <text
									style="font-weight: normal;margin-left: 20rpx;">不冰</text>
							</view>
						</view>
					</view>
					<view class="number">
						购买数量
						<u-number-box v-model="buyNumber" @change="valChange"
							:min="skuValue[skuCurrent].buy_num"></u-number-box>
					</view>
					<view class="btns">
						<view class="add_cart" @click="addCarClick('0')">加入购物车</view>
						<view class="buy_btn" @click="addCarClick('1')">立即购买</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(), //胶囊按钮信息
				typeCurrent: 0,
				baseUrl: this.$baseUrl,
				leftNavCurrent: 0,
				rightNavCurrent: 0,
				skuCurrent: 0,
				allType: false,
				brandShow: false,
				addCar: false,
				typeList: [],
				typeChildList: [],
				brandList: [{
					id: '',
					title: '全部'
				}],
				brandName: '全部',
				brandId: '',
				category: '',
				page: 1,
				pageSize: 10,
				count: 1,
				goodsList: [],
				isLogin: false,
				status: 'loadmore',
				goodsInfo: null,
				isRenzheng: false,
				goodsDetail: null,
				skuValue: [],
				bdCurrent: 0,
				bdNumber: 0,
				bfNumber: 0,
				cwNumber: 0,
				buyNumber: 1,
				selectSku: null,
			}
		},
		onLoad() {
			this.getGoodsType()
			// this.getBrand()
		},
		onShow() {
			if (getApp().selectNum) {
				console.log(getApp.selectNum);
				this.goodsList = []
				this.getGoodsType()
			}
			if (uni.getStorageSync('userToken')) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		},
		onReachBottom() {
			if (this.goodsList.length < this.pageSize || this.status == 'nomore') return;
			this.status = 'loading';
			this.page++
			this.getGoodsList()
		},
		methods: {
			typeClick() {
				this.allType = true
			},
			typeClose() {
				this.allType = false
			},
			maskClose() {
				this.goodsDetail = null
				this.skuValue = []
				this.selectSku = null
				this.skuCurrent = 0
			},
			bdClick(item, index) {
				this.bdCurrent = index
				this.selectWd = item
				this.valChange()
			},
			valChange() {
				if (this.selectWd == '全冰') {
					this.bdNumber = this.buyNumber * this.selectSku.num
					this.cwNumber = 0
				} else if (this.selectWd == '一半冰' || this.selectWd == '一半冰一半不冰') {
					this.bdNumber = Math.ceil(this.buyNumber * this.selectSku.num / 2)
					this.cwNumber = this.buyNumber * this.selectSku.num - this.bdNumber
				} else if (this.selectWd == '常温') {
					this.bdNumber = 0
					this.cwNumber = this.buyNumber * this.selectSku.num
				} else if (this.selectWd == '自定义冰冻数量') {
					this.sliderEnd()
				}
			},
			sliderEnd() {
				let cs = this.bfNumber / 100
				this.cwNumber = Math.ceil(this.buyNumber * this.selectSku.num * cs)
				this.bdNumber = this.buyNumber * this.selectSku.num - this.cwNumber
			},
			skuClick(item, index) {
				this.selectSku = item
				this.skuCurrent = index
				this.bdCurrent = 0
				this.bfNumber = 0
				this.buyNumber =this.skuValue[index].buy_num
				this.selectWd = this.skuValue[index].wdInfo[0]
				this.valChange()
			},
			skuClick(item, index) {
				this.selectSku = item
				this.skuCurrent = index
				this.valChange()
			},
			addCarClick(type) {
				this.$allApi.addCar({
					productId: this.selectSku.product_id,
					cartNum: this.buyNumber,
					uniqueId: this.selectSku.unique,
					bd_value: JSON.stringify({
						bd: this.bdNumber,
						cw: this.cwNumber,
						type: this.selectWd,
						bfNumber: this.bfNumber / 100
					}),
					new: type
				}).then(res => {
					this.addCar = false
					this.bdNumber = 0
					this.cwNumber = 0
					this.cwNumber = 0
					this.bdCurrent = 0
					this.buyNumber = 1
					this.bfNumber = 0
					this.skuCurrent = 0
					if (type == '0') {
						this.$u.toast('添加成功')
					} else {
						this.$gourl(`/mallPage/confirmOrder?car_id=${res.data.cartId}`)
					}
				})
			},
			getserInfo() {
				this.$allApi.getUserInfo().then(res => {
					if (res.data.user.type_title.length > 0) {
						this.isRenzheng = true
					}
				})
			},
			goodsClick(item) {
				this.goodsInfo = item
				this.getGoodsData(item.id)
			},
			getGoodsData(id) {
				this.skuValue = []
				this.$allApi.getGoodsDetail({
					id: id
				}).then(res => {
					this.goodsDetail = res.data
					for (let item in res.data.productValue) {
						this.skuValue.push(res.data.productValue[item])
					}
					for (let item of this.skuValue) {
						item.wdInfo = []
						item.wdInfo = item.wd_value.split(',')
					}
					this.buyNumber = this.skuValue[0].buy_num
					this.selectSku = this.skuValue[0]
					this.selectWd = this.selectSku.wdInfo[0]
					this.valChange()
					this.addCar = true
				})
			},
			async getGoodsType() {
				await this.$allApi.getGoodsType().then(res => {
					if (getApp().selectNum) {
						this.typeCurrent = getApp().selectNum
						this.typeChildList = res.data[getApp().selectNum].children
					} else {
						this.typeCurrent = 0
						this.typeChildList = res.data[0].children
					}
					this.$forceUpdate()
					this.typeList = [...res.data]
					if (this.typeChildList.length > 0) {
						this.category = this.typeChildList[0].id
						this.getGoodsList()
					}
				})
			},
			async getGoodsList() {
				await this.$allApi.getGoodsList({
					page: this.page,
					limit: this.pageSize,
					sid: this.category,
				}).then(res => {
					this.goodsList = [...this.goodsList, ...res.data]
					if (res.data.length < this.pageSize) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			},
			selectType(item, index) {
				// 获取滚动容器元素
				const scrollContainer = uni.createSelectorQuery().select('.type_box');
				// 获取当前激活（选中）的元素
				const activeElement = uni.createSelectorQuery().select('.active');
				// 获取单个 list 元素宽度，用于后续计算
				const listElement = uni.createSelectorQuery().select('.list');
				listElement.boundingClientRect((listRect) => {
					scrollContainer.boundingClientRect((scrollRect) => {
						activeElement.boundingClientRect((activeRect) => {
							// 计算滚动距离，使选中元素滚动到横向中间位置
							const scrollLeft = activeRect.left - (scrollRect.width / 2 - listRect
								.width / 2);
							// 调用横向滚动 API 进行滚动，以 uni-app 为例，其他框架有对应方法
							uni.pageScrollTo({
								scrollLeft: scrollLeft,
								duration: 300 // 滚动动画时长，可按需调整
							});
							this.$forceUpdate()
						}).exec();
					}).exec();
				}).exec();
				this.typeCurrent = index
				this.typeChildList = item.children
				this.page = 1
				this.leftNavCurrent = 0
				this.goodsList = []
				this.category = this.typeChildList[0].id
				this.getGoodsList()
				this.allType = false
			},
			leftNavBarClick(item, index) {
				this.leftNavCurrent = index
				this.category = item.id
				this.page = 1
				this.goodsList = []
				this.getGoodsList()
			},
			refresherrefresh(e) {
				if (this.goodsList.length < this.pageSize || this.status == 'nomore') return;
				this.status = 'loading';
				this.page++
				this.getGoodsList()
			},
			brandClick(item, index) {
				this.rightNavCurrent = index
				this.brandShow = false
				this.brandName = item.title
				this.brandId = item.id
				this.page = 1
				this.goodsList = []
				this.getGoodsList()
			},
		}
	}
</script>
<style>
	.u-drawer-bottom {
		background: none !important;
	}
</style>
<style lang="scss" scoped>
	.bg_box {
		background: linear-gradient(180deg, rgba(244, 128, 129, 1) 0%, rgba(255, 228, 229, 1) 100%);
		height: 350rpx;
		position: sticky;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 999;
	}

	.top_img {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}

	.con {
		.con_bg {
			background: #F6F6F6;
			padding-bottom: 30rpx;
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 45rpx;
			overflow: hidden;
			// margin-bottom: 30rpx;

			view {
				flex: 1;
				height: 90rpx;
				background: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}

			.buy_btn {
				background: #DB3E3F;
			}
		}

		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border-top: 1px solid #f3f3f3;
			background: #fff;
			margin: 20rpx 0;
		}

		.sku_box {
			margin-top: 12rpx;
			padding: 0 20rpx;
			background: #fff;
			margin-top: 20rpx;
			padding: 20rpx;

			.input_box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border: 1px solid #f6f6f6;
				border-radius: 10rpx;

				view {
					width: 236rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background: #F6F6F6;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				input {
					flex: 1;
					padding-left: 20rpx;
				}
			}

			.title {
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;

				.sku {
					font-weight: normal;

					.ice {
						color: #26ACF5;
						margin: 0 10rpx;
					}
				}
			}

			.sku {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				.list {
					border-radius: 10rpx;
					background: #F6F6F6;
					margin: 20rpx;
				}
			}

			.guigebox {

				display: flex;
				align-items: center;
				justify-content: flex-start;
				height: 242rpx;
				/* 添加以下样式，禁止父级元素拦截触摸事件 */
				-webkit-overflow-scrolling: touch;


				.list {
					margin: 10rpx;
					width: 142rpx;
					border-radius: 12rpx;
					background: #fff;
					border: 2rpx solid #fff;
					flex-shrink: 0;

					image {
						width: 138rpx;
						height: 138rpx;
						border-radius: 12rpx 12rpx 0 0;
						display: inline-block;
					}

					.text {
						background: #F6F6F6;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						text-overflow: ellipsis;
						border-radius: 0 0 12rpx 12rpx;
						padding: 0 8rpx;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}

			.bing {
				justify-content: space-between;

				.list {
					min-width: 170rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					padding: 20rpx 36rpx;
					margin: 0;
					margin-bottom: 20rpx;
				}
			}

			.active {
				background: rgba(234, 61, 55, 0.08);
				border: 2rpx solid #DB3E3F !important;
				color: #DB3E3F;
				font-weight: bold;

				view {
					color: #DB3E3F;
					background: rgba(234, 61, 55, 0.08);
				}
			}
		}

		.mall_info {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			padding-top: 40rpx;
			background: #fff;

			.infos {
				flex: 1;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.specs {
					color: #999;
					font-size: 24rpx;
				}

				.price {
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;

					.big {
						font-size: 40rpx;
						color: #EA3D37;

						text {
							font-size: 24rpx;
						}
					}

					.small {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;

						text {
							font-size: 18rpx;
						}
					}
				}

				.sku_num {
					font-size: 24rpx;
					color: #999;
				}
			}

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}
	}

	.content {
		display: flex;
		justify-content: space-between;
		height: calc(100vh - 350rpx);

		.content_right_content {
			flex: 1;
			padding: 30rpx;
			height: calc(100vh - 350rpx - 64rpx -30rpx - 94rpx);
			// overflow-y: scroll;
			// overflow-x: hidden;

			.mall_box {
				// overflow-y: scroll;
				// overflow-x: hidden;

				.mall {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					padding-bottom: 20rpx;

					.addcart {
						width: 96rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 20rpx;
						background: #EA3D37;
						border-radius: 6rpx;
						position: absolute;
						right: 0;
						bottom: 20rpx;

					}

					.mall_info {
						flex: 1;
						padding-left: 30rpx;
						line-height: 2;

						.name {
							font-size: 30rpx;
						}

						.specs {
							font-size: 20rpx;
							color: #999;
						}

						.renzhen {
							font-size: 28rpx;
							color: #EA3D37;
						}
					}

					image {
						width: 156rpx;
						height: 156rpx;
					}
				}
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #333;
				border-bottom: 1px solid #f3f3f3;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;

				.more {
					color: #EA3D37;
				}
			}

		}


		.content_left_nav_bar {
			width: 196rpx;
			background: #F2F2F2;
			height: calc(100vh - 350rpx);
			// overflow-y: scroll;
			// overflow: hidden;

			.bar_con {
				width: 196rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #F2F2F2;
				padding-left: 30rpx;
			}

			.active {
				color: #EA3D37;
				width: 196rpx;
				font-weight: bold;
				background: #fff;
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.active::after {
				content: '';
				width: 4rpx;
				height: 48rpx;
				background: #EA3D37;
				position: absolute;
				left: 0;
				top: 23rpx;
			}

		}
	}

	.type_mask {
		position: fixed;
		bottom: 0;
		left: 0;
		top: 0;
		width: 100vw;
		height: calc(100vh - 92rpx);
		z-index: 99;
		background: rgba(0, 0, 0, .5);

		.mask_content {
			background: #fff;
			padding: 30rpx;
			border-radius: 0 0 20rpx 20rpx;

			.sq {
				text-align: center;
				color: #999999;
				font-size: 24rpx;
			}

			.list_box {

				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				.list {
					width: 20%;
					text-align: center;
					margin-bottom: 20rpx;
					padding: 0 24rpx;
					font-size: 20rpx;
				}

				.name {
					border-radius: 16rpx;
					height: 32rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid rgba(0, 0, 0, 0);
				}

				image {
					width: 92rpx;
					height: 92rpx;
					border-radius: 46rpx;
					border: 2rpx solid rgba(0, 0, 0, 0);
				}
			}

			.active {
				.name {
					height: 32rpx;
					border-radius: 16rpx;
					color: #fff;
					background: #EA3D37;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				image {
					border: 2rpx solid #EA3D37;
				}
			}
		}
	}

	.commodity_type {
		padding: 30rpx 30rpx 10rpx 30rpx;
		position: relative;
		height: 188rpx;

		.all {
			position: absolute;
			right: 0;
			top: 0;
			width: 64rpx;
			height: 188rpx;
			color: #fff;
			background: linear-gradient(180deg, rgba(244, 128, 129, 1) 0%, rgba(255, 228, 229, 1) 100%);
			box-shadow: -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.09);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.option {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.type_box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				overflow-x: scroll;

				.list {
					width: 92rpx;
					font-size: 20rpx;
					text-align: center;

					.name {
						width: 92rpx;
						height: 32rpx;
						border-radius: 16rpx;
						margin-top: 10rpx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						width: 92rpx;
						height: 92rpx;
						border-radius: 46rpx;
						border: 1px solid rgba(0, 0, 0, 0);
					}
				}


				.active {
					.name {
						width: 92rpx;
						height: 32rpx;
						border-radius: 16rpx;
						background: #fff;
						color: #DB3E3F;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					image {
						border: 2rpx solid #fff;
					}
				}

				.list {
					margin: 0 20rpx;
				}
			}

		}

	}

	.top_box {
		padding: 0 20rpx;

		.search_box {
			margin: 0 auto;
			height: 60rpx;
			border-radius: 30rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 28rpx;
			padding-right: 4rpx;

			input {
				flex: 1;
				padding: 0 20rpx;
			}
		}
	}
</style>